<template>
    <div>
        <!--按钮-->
        <Button type="success" @click="modal1= true" >新增</Button>
        <Button type="primary" @click="removes">删除多个</Button>
        <Input search  v-model="input2" placeholder="请输入宠物ID" :style="{width:200+'px'}" />
        <Button type="info" @click="sousuo" >搜索</Button>
        <!--模态框-->
        <Modal
              v-model = "modal1"
              title   = "寻宠启示"
            :loading  = "loading"
              @on-ok  = "asyncOK">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="宠宝ID">
                    <Input v-model="formValidate.input" placeholder="请填入宠宝ID"></Input>
                </FormItem>
                 <FormItem label="宠物名">
                    <Input v-model="formValidate.input1" placeholder="请填入宠物名"></Input>
                </FormItem>
                <FormItem label="宠物类别">
                    <Select v-model="formValidate.select">
                        <Option value="猫">猫</Option>
                        <Option value="狗">狗</Option>
                        <Option value="其他">其他</Option>
                    </Select>
                </FormItem>
               
                <FormItem label="宠宝毛色" prop="desc">
                    <Input v-model="formValidate.desc" type="text" placeholder="请输入宠宝毛色"></Input>
                </FormItem>
                 <FormItem label="宠主" prop="desc1">
                    <Input v-model="formValidate.desc1" type="text" placeholder="请输入宠主名称"></Input>
                </FormItem>
                 <FormItem label="联系方式" prop="desc2">
                    <Input v-model="formValidate.desc2" type="text" placeholder="请输入宠主联系方式"></Input>
                </FormItem>
                 <FormItem label="丢失时间">
                    <Row>
                        <Col span="11">
                            <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                        </Col>
                        <Col span="2" style="text-align: center">-</Col>
                        <Col span="11">
                            <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="宠主描述" prop="desc3">
                    <Input v-model="formValidate.desc3" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入描述"></Input>
                </FormItem>
                <FormItem label="寻宠状态">
                    <Select v-model="formValidate.select2">
                        <Option value="已找到">已找到</Option>
                        <Option value="寻找中">寻找中</Option>
                        <Option value="其他">其他</Option>
                    </Select>
                </FormItem>
                
                <FormItem >
                    <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
             <div slot="footer">
            </div>
            </Modal>
    <!--列表-->
    <Table border ref="selection" :columns="columns1" :data="data" @on-selection-change="onSelect"></Table>
    <!--分页-->
    <Page :total="total" :page-size="list" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" size="small" show-elevator show-sizer></Page>
  </div>
    
</template>
<script>
    export default {
        data () {
            return {
                 formValidate: {
                    input  : '',
                    input1 : '',
                    input2 : '',
                    select : '',
                    select2: '',
                    date   : '',
                    time   : '',
                    desc   : '',
                    desc1  : '',
                    desc2  : '',
                    desc3  : '',
                },
                  ruleValidate: {
                    input:[
                        { required: true, message: 'Please enter a ID', trigger: 'blur' },
                        { type: 'string', trigger: 'blur' }
                        ],
                    input1:[
                        { required: true, message: 'Please enter PETNAME', trigger: 'blur' },
                        { type: 'string',trigger: 'blur' }
                        ],
                    select:[
                        {required: true, type: 'string',}
                        ],
                    select2:[
                        {required: true, type: 'string',}
                        ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter color', trigger: 'blur' },
                        { type: 'string', trigger: 'blur' }
                    ],
                    desc1: [
                        { required: true, message: 'Please enter holder', trigger: 'blur' },
                        { type: 'string', trigger: 'blur' }
                    ],
                    desc2: [
                        { required: true, message: 'Please enter a phonenumber', trigger: 'blur',type: 'number' },
                        { type: 'number',lenght:11, trigger: 'blur' }
                    ],
                     desc3: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 2, message: 'Introduce no less than 2 words', trigger: 'blur' }
                    ],
                },
               
                columns1: [
                     {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title : '宠宝ID',
                        key   : 'acname',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.acname)
                            ]);
                        }
                    },
                    {
                        title: '宠物名',
                        key  : 'petname'
                    },
                    {
                        title: '宠物类别',
                        key  : 'petclassify'
                    },
                     {
                        title: '宠宝毛色',
                        key  : 'petcolor'
                    },
                     {
                        title: '宠主',
                        key  : 'petbelonger'
                    },
                     {
                        title: '联系方式',
                        key  : 'callme'
                    },
                     {
                        title: '丢失时间',
                        key  : 'misstime'
                    },
                     {
                        title: '宠主描述',
                        key  : 'describe'
                    },
                     {
                        title: '寻宠状态',
                        key  : 'status'
                    },
                    {
                        title : '功能',
                        key   : 'action',
                        width : 200,
                        align : 'center',
                        render: (h, params) => {
                            return h('div', [
                                 h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                 h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row._id);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.remove(params.row._id);    
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                data       : [],
                total      : 0,
                page       : 1,
                list       : 5,
                modal1     : false,
                loading    : true,
                removesdata: [],
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title  : '启示详情',
                    content: `宠宝ID：${this.data[index].acname}<br>宠物名：${this.data[index].petname}<br>宠主：${this.data[index].petbelonger}<br>丢失时间：${this.data[index].misstime}<br>宠物类别：${this.data[index].petclassify}<br>宠主描述：${this.data[index].describe}<br>联系方式:${this.data[index].callme}<br>寻宠状态:${this.data[index].status}`
                })
            },
      sousuo(){
                console.log(this.input2);
                this.axios({
                method: "post",
                url   : 'http://10.31.162.59:3000/service/list',
                data  : {
                  page  : this.page,
                  limit : this.list,
                  acname: this.input2
                },
                }).then(res=>{
                this.total = res.data.total;
                this.data  = res.data.docs;
                })
            },
            remove (id) {
                this.$Modal.confirm({
                title  : '确认操作',
                content: '<p>你确认删除该记录吗?</p>',
                onOk   : () => {
                  this.axios({
                              url   : `http://10.31.162.59:3000/service/${id}`,
                              method: 'delete'
                            }).then(res => {
                                alert('你已经删除成功');
                              this.getData();
                            });
                },
                onCancel: () => {
                  this.$Message.info('Clicked cancel');
                }
              });
            },
            getData(){
                this.axios({
                method: "post",
                url   : 'http://10.31.162.59:3000/service/list',
                data  : {
                  page : this.page,
                  limit: this.list
                },
                }).then(res=>{
                this.total = res.data.total;
                this.data  = res.data.docs;
                })
            },
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 2000);
            },
            onSelect(selections){
                var ids = [];
                for (let i = 0; i < selections.length; i++) {
                  ids.push(selections[i]._id);
                }
                this.ids = ids.toString();
                console.log(this.ids);
            },
            // 多选删除
            removes(){
                console.log(this.ids);
                this.$Modal.confirm({
                title  : '确认操作',
                content: '<p>你确认删除该记录吗?</p>',
                onOk   : () => {
                  this.axios({
                      url   : `http://10.31.162.59:3000/service`,
                      method: 'delete',
                      data  : {
                           ids: this.ids
                        }
                    }).then(res => {
                        alert('你已经删除成功');
                      this.getData();
                    });
                },
                onCancel: () => {
                  this.$Message.info('Clicked cancel');
                }
              });
            },
            // 在此函数进行帖子提交
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                  var misstimel    = new Date(this.formValidate.date);
                  var misstimeleft = misstimel.toLocaleDateString();
                  let misstime     = misstimeleft+" "+this.formValidate.time;
            if (this.formValidate._id) {
                this.axios({
                  url   : `http://10.31.162.59:3000/service/${this.formValidate._id}`,
                  method: 'put',
                  data  : {
                      acname     : this.formValidate.input,
                      petname    : this.formValidate.input1,
                      petclassify: this.formValidate.select,
                      petcolor   : this.formValidate.desc,
                      petbelonger: this.formValidate.desc1,
                      callme     : this.formValidate.desc2,
                      describe   : this.formValidate.desc3,
                      status     : this.formValidate.select2,
                      misstime   : misstime,
                  },
                }).then(res => {
                  this.modal1 = false;
                  this.$refs[name].resetFields();
                  this.getData();
                });
          }else{
                      this.axios({
                            method: 'post',
                            url   : 'http://10.31.162.59:3000/service',
                            data  : {
                               acname     : this.formValidate.input,
                               petname    : this.formValidate.input1,
                               petclassify: this.formValidate.select,
                               petcolor   : this.formValidate.desc,
                               petbelonger: this.formValidate.desc1,
                               callme     : this.formValidate.desc2,
                               describe   : this.formValidate.desc3,
                               status     : this.formValidate.select2,
                               misstime   : new Date().toLocaleDateString()+" "+new Date().toLocaleTimeString(),
                            }
                        }).then(res=>{
                            this.modal1 = false;
                            this.$refs[name].resetFields();
                            this.getData();
                        });
                    }
                });
            },
             handleReset(name) {
              this.$refs[name].resetFields();
            },
            edit(id){
                console.log('修改啊');
                   this.axios({
                      url   : `http://10.31.162.59:3000/service/${id}`,
                      method: 'get'
                    }).then(res => {
                        console.log(res);
                        this.formValidate        = res.data;
                        this.formValidate.input  = res.data.acname;
                        this.formValidate.input1 = res.data.petname;
                        this.formValidate.select = res.data.petclassify;
                        this.formValidate.desc   = res.data.petcolor;
                        this.formValidate.desc1  = res.data.petbelonger;
                        this.formValidate.date   = res.data.gettime.split(' ')[0];
                        this.formValidate.time   = res.data.gettime.split(' ')[1];
                        this.modal1              = true;
                    });
            },
           onChangePage(page) {
                this.page = page;
                if(this.input2!=""){
                  this.sousuo();  
                }else{
                this.getData();
                } 
            },
            onPageSizeChange(list) {
                console.log(list);
                 this.list = list;
                if(this.input2!=""){
                    this.sousuo();
                }else{
                    this.getData();
                }
            },
        },
        mounted(){
            this.getData();
        }
    }
</script>
<style>
#serchuser{margin:20px}
</style>

